.container {
  margin: rem(24) rem(16);
  .tabs {
    button[role='tab'] {
      font-size: rem(16) !important;
      padding: rem(8) rem(12);
    }
  }
}

.contentContainer {
  width: 100%;
  .actions {
    flex-direction: column;
    gap: rem(8);
    margin-right: auto;
    @include breakpoint('md') {
      flex-direction: row;
      align-items: center;
      gap: rem(16);
    }
    @include breakpoint('md', 'lg') {
      gap: rem(8);
    }
    label {
      font-weight: 500;
    }
    .checkbox {
      span[class*='-checkbox__label'] {
        font-size: rem(16);
        font-weight: 500;
      }
    }
    .divider {
      @include breakpoint('sm', 'md') {
        display: none;
      }
      @include breakpoint('md') {
        width: rem(2);
        height: rem(24);
        background-color: var(--secondary-color);
      }
    }
  }
  .tableContainer {
    width: 100%;
    overflow-x: auto;
    display: block;

    .table {
      thead {
        height: rem(32);
      }
      tbody {
        td {
          white-space: nowrap;
        }
      }
    }
    .longColumnValue {
      flex-wrap: wrap;
    }
    // .clipboardText {

    // }

    .tablesSchemaCol {
      gap: rem(16);
    }

    .gauge {
      div[class*='textOverlay'] {
        bottom: rem(12);
      }
    }
  }
  .statusContainer {
    flex-direction: column;
    width: 100%;
    gap: rem(16);
    @include breakpoint('md') {
      flex-direction: row;
      gap: rem(32);
    }

    .statusInnerContainer {
      width: 100%;
      align-items: flex-start;
      border-radius: $border-radius-md;
      box-shadow: $box-shadow2-lg;
      padding: rem(8);
      @include breakpoint('md') {
        width: 50%;
      }
      .accordion {
        width: 100%;
        td[class*='tableColumn'] {
          text-align: left;
        }
      }
    }
  }

  .variableContainer {
    td[class*='tableColumn'] {
      text-align: left;
      padding-left: rem(16);
    }
    .longVariable {
      white-space: break-spaces;
      word-break: break-all;
    }
  }
}

.comboBox {
  width: 100%;
  margin-bottom: rem(16);
  @include breakpoint('md') {
    width: auto;
    margin-bottom: 0;
  }
}

.textContainer {
  width: 100%;
}

.table {
  align-items: center;
  overflow: hidden;
  grid-template-columns: auto !important;
}